<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" >
<title>Insert title here</title>
 <script  th:src="@{/js/jquery-1.8.3.min.js}"></script>
 <script  th:src="@{/js/echarts.js}"></script>
 
</head>
<body>
	<input type="button" value="显示" onclick="loadDrugs()"/>
	<div id="main2" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
    //图表
    var myChart = echarts.init(document.getElementById("main2"));
    function loadDrugs() {
    	myChart.clear();
    	myChart.showLoading({text: '正在努力的读取数据中...'});
    	$.post("/echarys/t2",function(data){
    		myChart.setOption( {
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    tooltip: {},
                    legend: {
                        data:['销量']
                    },
                    xAxis: {
                        data: ["iPhone4s","iPhone5s","iPhone6","iPhone7","iPhoneX"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        //可省略
                        data: [1000,1000,1000,1000,1000],
                       markPoint: {
                    	   symbol:'pin',
                    	   symbolOffset:['0','0%'],
                    	   data: [ 
                    		   {type:'max',name:'最大值',symbol:'diamond',symbolSize:'50',symbolOffset:['0','-50%']},
                    		   {type:'min',name:'最小值'}
                    	   ]
                       },
                       markLine: {
                    	   data: [
                    		   {type:'average',name:'平均'}
                    	   ]
                       }
                    }]
                });
    		
        	 myChart.setOption(data);
        	 myChart.hideLoading();
    	},"json");
    	
    	//事件
    	//'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'
    	//http://echarts.baidu.com/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA
    	myChart.on('click', function (params) {
    	   // window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
    	   
    	   //当单击markPoint,并弹出MarkPoint弹出
    	   if(params.componentType ==="markPoint"){
    		   alert(params.value);
    	   }
    	   if(params.componentType === 'series'){
    		   if(params.seriesType === 'bar'){
    			   if (params.dataType === 'edge') {
    	                // 点击到了 graph 的 edge（边）上
    	                alert("edge");
    	            }
    	            else {
    	                // 点击到了 graph 的 node（节点）上
    	                alert("node");
    	            }
    		   }
    	   }
    	});
    }
 </script>
</body>
</html>